<template>
  <div class="address-add-edit">
    <Header>编辑地址</Header>
    
    <section>

      <div>
        <div class="row">
          <div class="label">收货人:</div>
          <input type="text" v-model="form.consignee">
        </div>

        <div class="row">
          <div class="label">手机号:</div>
          <input type="text" v-model="form.consignee_tel">
        </div>

        <div class="row">
          <div class="label">省市区:</div>
          <input type="text" @click="showArea = true" :value="form.area">
        </div>

        <div class="row address">
          <div class="label">详细地址:</div>
          <textarea rows="2" v-model="form.address"></textarea>
        </div>
      </div>

      <button class="btn" @click="save">保存</button>
      <button class="btn del" @click="del" v-if="$route.query.id">删除</button>

    </section>

    <popup v-model:show="showArea">
      <Area title="现在所在省份" :areaList="areaList" @confirm="handleArea" @cancel="showArea = false"></Area>
    </popup>

    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from '@/components/common/Header.vue'
import Tabbar from '@/components/common/Tabbar.vue'
import { Area, Popup, Toast } from 'vant'
import { areaList } from '@vant/area-data'
import { reactive, ref } from 'vue'
import { deliveryAddress_add, deliveryAddress_update, deliveryAddress_del } from '@/api/deliveryAddressApi.js'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const form = reactive({
  consignee: '',
  consignee_tel: '',
  area: '',
  address: ''
})

if (route.query.id) {
  form.id = route.query.id
  form.consignee = route.query.consignee
  form.consignee_tel = route.query.consignee_tel
  form.area = route.query.area
  form.address = route.query.address
}

const rules = reactive({
  consignee: {
    rule:/^[\u4e00-\u9fa5_a-zA-Z0-9]{2,32}$/,
    msg:'收货人必须为2到32位'
  },
  consignee_tel:{
    rule:/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
    msg:'手机号格式不正确'
  },
  area: {
    rule: /^[\s\S]*.*[^\s][\s\S]*$/,
    msg: '省市区不能为空'
  },
  address: {
    rule: /^([\u4e00-\u9fa5_a-zA-Z0-9]|\s|-){6,128}$/,
    msg: '地址详情必须为6到128'
  }
})

const showArea = ref(false)

const handleArea = (result) => {
  form.area = ''
  result.forEach(item =>  form.area = form.area + item.name + ' ')
  
  form.area = form.area.trim()
  showArea.value = false
}

const save = async () => {
  if (!rules.consignee.rule.test(form.consignee)) {
    Toast.fail(rules.consignee.msg)
    return
  }

  if (!rules.consignee_tel.rule.test(form.consignee_tel)) {
    Toast.fail(rules.consignee_tel.msg)
    return
  }

  if (!rules.area.rule.test(form.area)) {
    Toast.fail(rules.area.msg)
    return
  }

  if (!rules.address.rule.test(form.address)) {
    Toast.fail(rules.address.msg)
    return
  }

  try {
    let result = null
    if (!route.query.id) {
      result = await deliveryAddress_add(form.consignee, form.consignee_tel, form.area, form.address)
    } else {
      result = await deliveryAddress_update(form.id, form.consignee, form.consignee_tel, form.area, form.address)
    }

    console.log(result)
    Toast.success('编辑地址成功')
  } catch ({ response: { data } }) {
    Toast.fail(data.msg)
  }
  router.back()
}

const del = async () => {
  try {
    let result = await deliveryAddress_del(form.id)

    console.log(result)
    Toast.success('删除地址成功')
  } catch ({ response: { data } }) {
    Toast.fail(data.msg)
  }
  router.back()
}
</script>

<style lang="less" scoped>
.address-add-edit{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;
    >div {
      background-color: #fff;
      .row{
        height: 50px;
        border-bottom: solid 1px #ddd;
        display: flex;
        .label {
          line-height: 50px;
          padding: 0 10px;
        }
        input{
          flex: 1;
        }

        textarea{
          flex: 1;
          border: none;
          font-size: 14px;
          padding: 15px 0 10px;
        }
      }

      .address{
        height: 70px;
      }
    }

    .btn{
      width: 300px;
      height: 40px;
      font-size: 14px;
      border: none;
      background-color: #b0352f;
      color: #fff;
      margin: 20px auto;
      display: block;
    }
    .del{
      background-color: #000;
    }
  }
}
</style>